@charset "UTF-8";

@media screen and (max-width: 1050px) {

    #join  .j-nav{
        width: 100%;
    }
    #join  .j-nav ul {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
        height: auto;
        margin: auto;
        padding-bottom: calc((150/192)*1rem);
    }

    #join  .j-nav ul li{
        width: 33%;
        height:auto ;
        margin: unset;
        font-size: 14px;
        text-align: center;
    }
    #join  .j-nav ul li h5{
        width: calc((273/192)*1rem);
        height: calc((273/192)*1rem);
        margin: auto;
    }

    #join  .j-nav ul li p{
        white-space: nowrap;
    }
    #join .j-content .talent >div{
        width: 100%;

    }
    #join .j-content .talent >div .title{
        width: 100%;

    }
    #join .j-content .talent >div .title h6,
    #join .j-content .talent >div .title p{
        margin-left: 0;
        font-size: 20px;
    }
    #join .j-content .talent >div .title h6,
    #join .j-content .talent > div .title p {
        margin-left: calc((140/192)*1rem);
    }
    #join .j-content .talent >div ul li .top{

    }
    #join .j-content .talent >div ul li .top h6,
    #join .j-content .talent >div ul li .top p{
        width: auto;
        font-size: 18px;
    }

    #join .j-content .talent >div ul li .top h6,
    #join .j-content .talent >div ul li .top p:nth-of-type(1) {
        width: 50px;
        margin-left: calc((120/192)*1rem);
    }
    #join .j-content .talent >div ul li .top h6{
        width: 95px;
    }
    #join .j-content .talent >div ul li .top p:nth-of-type(2){
        width: 50px;
        margin-left: calc((140/192)*1rem);
    }
    #join .j-content .talent >div ul li .top i{
        width: 15px;
        height: 15px;
        line-height: 15px;
    }


    #join .j-content .talent .btn{
        height: auto;
    }
    #join .j-content .talent .btn .center{
        display: flex;
        width: 80%;
        padding-bottom: calc((63/192)*1rem);
        justify-content: space-around;
    }
    #join .j-content .talent .btn .center .prv,
    #join .j-content .talent .btn .center .next,
    #join .j-content .talent .btn .center ul li{
        padding: calc((20/192)*1rem)  calc((30/192)*1rem) ;
        font-size: 16px;
    }


    #join .j-content .talent > div > ul > li .bottom ul > li{
        width: 45%;
        line-height: calc((125/192)*1rem);
    }
    #join .j-content .talent > div > ul > li .bottom ul li p{
        font-size: 18px;
    }
    #join .j-content .talent > div > ul > li .bottom ul li p span{
        width: 13px;
        height: 13px;
    }

    #join .j-content .talent > div > ul > li .bottom ul li ol li{
        font-size: 16px;
    }
    #join .j-content .talent > div > ul > li .bottom ul .right a{
        bottom: calc((-100/192)*1rem);
        font-size: 16px;
    }

    #join .j-content .contact .content{
        width: 100%;
    }
    #join .j-content .contact .content .left,
    #join .j-content .contact .content .right{
        float: none;
        width: 90%;
        margin:auto;
    }
    #join .j-content .contact .content .left{
        font-size: 20px;
        line-height: calc((150/192)*1rem);
    }

    #join .j-content .contact .content .right{
        height: auto;
    }
    #join .j-content .map div{
        width: 100%;
        height: 400px;
    }
}


@media screen and (max-width: 750px) {


    #join .j-content .talent > div > ul > li .bottom ul > li{
        float: none;
        width: 90%;
        margin: auto;
        text-align: justify;

    }
    #join .j-content .talent > div > ul > li .bottom ul > .right{
        padding-bottom: calc((150/192)*1rem);
    }
    #join .j-content .talent > div > ul > li .bottom ul .right a{
        bottom: calc((20/192)*1rem);
    }

}


















